<template>
  <div class="talk_box">
    <div class="search_top">
      <van-search v-model="value" placeholder="请输入搜索关键词"/>
    </div>
    <div class="talk_content">
      <!--<van-divider>热门话题</van-divider>-->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <DiscussModel  v-for="item in list" :talk = "item"></DiscussModel>
        <!--<van-cell v-for="item in list" :key="item" :title="item" />-->
      </van-list>
      <!--<div style="background-color: white; border: red solid 2px;height: 1000px"></div>-->
    </div>
  
  </div>
</template>
<script>

import DiscussModel from "@/components/DiscussModel";
import {Toast} from "vant";
export default {
  name: 'TalkView',
  components: {DiscussModel},
  data() {
    return {
      value: "",
      list: [
        // {name: "#石则仁是世界第一美女？", participant: 10000},
        // {name: "#熟读《一带一路》，", participant: 2800},
        // {name: "#湖南已交车坠江", participant: 31},
        // {name: "#23名男女感染H7N9病毒后死亡", participant: 68},
        // {name: "#9999元5星级酒店吃一年到底划不划算？", participant: 94},
        // {name: "#央视媒体追问：倒卖出生证明，是谁在做？", participant: 5},
      ],
      mateList:[
        {name: "#婚纱该怎么选？", participant: 10000,img:''},
        {name: "#石则仁是世界第一美女？", participant: 1,img:'/profile/upload/讨论1.jpg'},
        {name: "#熟读《一带一路》", participant: 2800,img:'/profile/upload/讨论2.png'},
        {name: "#习近平总数据出席金砖国家领导人巴以问题特别峰会", participant: 31,img:''},
        {name: "#习近平通乌拉圭总统卡列会谈", participant: 68,img:'/profile/upload/讨论3.jpg'},
        {name: "#9999元5星级酒店吃一年到底划不划算？", participant: 94,img:'/profile/upload/案例6.jpg'},
        {name: "#央视媒体追问：倒卖出生证明，是谁在做？", participant: 5,img:'/profile/upload/专属设计.jpg'},
        {name: "#央视媒体追问：倒卖出生证明，是谁在做？", participant: 5,img:'/profile/upload/案例6.jpg'},
        {name: "#Hello World？", participant: 5,img:''},
        {name: "#Hello WRX？", participant: 5,img:''},
      ],
      loading: false,
      finished: false,
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // for (let i = 0; i < 10; i++) {
        //   // this.list.push(this.list.length + 1);
        // }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 4) {
          this.finished = true;
        }
      }, 1000);
    },
  },
  watch: {
    // 监听value的变化
    value: {
      handler(newValue) {
        // 当value变化时，重新加载数据
        // 模拟异步更新数据
        console.log("value = " + newValue)
        var t = Toast.loading({
          message: '加载中...',
          forbidClick: true,
        });
        setTimeout(()=>{
          this.list.sort((a, b) => b.participant - a.participant);
          this.list = this.mateList.filter(item =>{
            return item.name.includes(this.value)
          })
        },500);
      },
    },
   
  },
  beforeMount() {
    this.list = this.mateList
    this.list.sort((a, b) => b.participant - a.participant);
  }
};
</script>
<style scoped lang="less">
.talk_box {

}
.search_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.talk_content{
  margin-top: 65px;
  padding: 0 10px;
}
</style>

